<template>
  <li v-bind:class="[isFolder ? 'folder' : 'item']">
    <label v-bind:class="{ open: open }" @click="toggle">
      {{ treeData.name }}
    </label>
    <transition name="slide">
      <ul v-show="open" v-if="isFolder">
        <!-- 递归调用menu-item组件 -->
        <menu-item
          v-for="(item, index) in treeData.children"
          :key="index"
          :treeData="item"
        >
        </menu-item>
      </ul>
    </transition>
  </li>
</template>

<script setup>
import menuItem from './menuItem.vue'
import { ref,computed} from "vue";

const props =defineProps({
    treeData:{type:Object}
})

let open=ref(false)
     
let isFolder=computed(() => {
    return props.treeData.children && props.treeData.children.length > 0;
})

function toggle() {
        if (isFolder) open.value = !open.value;
      }
</script>



